<template>
	<view class="top">
		<image src="/static/zuo.svg" mode=""></image>
		<text>看房纪录</text>
	</view>
	<view class="item" v-for="(item, index) in collectionList" :key='index'>
		<image :src="item.img" mode="" />
		<view class="">
			<text class='title'>{{ item.title }}</text>
			<text class='text'>{{ item.text }}</text>
			<view class="tags">
				<view v-for="(titem, tindex) in item.subset" :key='tindex' :class="TagsIf(tindex)" class='tagsItem' >{{ titem }}</view>
			</view>
			<text class='price'>
				<text class='bold'>{{ item.price }}</text>
				<text class='size'>元/月</text>
			</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				collectionList: []
			}
		},
		onLoad() {

		},
		methods: {
			TagsIf(tindex) {
				const typeMap = {
					0: 'tagsPrimary',
					1: 'tagsSuccess',
					2: 'tagsInfo',
					3: 'tagsWarning'
				}
				return typeMap[tindex]
			}
		}
	}
</script>

<style>
	.top {
		width: 100%;
		display: flex;
		height: 30px;
		align-items: center;
	}
	
	.top image {
		width: 20px;
		height: 20px;
	}
	
	.top text {
		font-size: 14px;
		font-weight: 550;
		color: #59cfb6;
		margin-left: 145px;
	}
	.item {
		width: 100%;
		padding: 15px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.item image {
		width: 100px;
		height: 80px
	}
	
	.title {
		font-weight: bold;
		margin-bottom: 5px;
	}
	.text {
		font-size: 12px; 
		color: #b4b6b7;
		margin-bottom: 5px;
	}
	
	.tags {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 5px;
	}
	
	.tagsItem {
		font-size: 14px;
		padding: 2px 3px;
		border-radius: 3px;
	}
	
	.tagsPrimary {
		background-color: #e1f6f9;
		color: #57c6d3;
	}
	
	.tagsSuccess {
		background-color: #e1f5ed;
		color: #7acd9e;
	}
	
	.tagsInfo {
		background-color: #e7f3ff;
		color: #cf5498;
	}
	
	.tagsWarning {
		background-color: #e7f3ff;
		color: #e7d063;
	}
	
	.price {
		color: #fa5842;
	}
	
	.bold {
		font-weight: bold;
	}
	
	.size {
		font-size: 14px;
	}
</style>